<template>
    <div class="buy_container" >
      <van-cell   />
      <div class="header">
        <van-icon size="26" name="wap-home-o" @click="toHome"/>
        <span class="title">值得买</span>
        <van-icon size="26" class="icon" name="search" @click="toSearch"/>
        <van-icon size="26" name="shopping-cart-o" @click="toShopCart"/>
      </div>
      <div class="nav_swiper">
        <img class="back_img" src="http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView" alt="">
        <div class="nav_title">
            <img src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" alt="">
            <span>严选好物 用心生活</span>
        </div>
        <div class="nav_content">
          <van-swipe  class="swiper"  :loop="false" :width="88" v-if="swiperList.length">
             <van-swipe-item class="swiperItem" v-for="(item,index) in newList" :key="index">
                <div class="swiper_item">
                  <div class="swiper_content" v-for="i in item" :key="i.id">
                    <img :src="(i.picUrl as string)" alt="">
                      <h3>{{ i.mainTitle }}</h3>
                      <div class="detail">{{ i.viceTitle }}</div>
                  </div>
                </div>
            </van-swipe-item>
            <template #indicator="{ active, total }">
              <div class="custom-indicator">
                <div class="dot" :class="{active:active === num-1 }" v-for="num in total" :key="num"></div>
              </div>
            </template>
          </van-swipe>
          <van-list
              @load="onLoad" offset="200" :immediate-check="false"  v-model:loading="loading">
              <div  v-masonry  class="fallWarp" gutter="10"  transition-duration="0.3s" item-selector=".item">
                <div v-masonry-tile   class="item" v-for="(item, index) in blocks" :key="item.topicId">
                  <div class="blockItem">
                    <div class="imgItem">
                      <img class="blockImg"  :src="item.newAppBanner || item.picUrl" alt="">
                      <div class="arrow" v-if="item.lookPics && item.lookPics[0].videoUrl">
                        <img src="https://yanxuan.nosdn.127.net/f631a249f001f3a9dfb46b7bfd723070.png" alt="">
                      </div>
                    </div>
                    <div class="blockText">{{ item.title }}</div>  
                    <div class="bottom">
                      <div class="avator">
                        <img class="avatorImg" :src="item.avatar" alt="">
                        <span>{{ item.nickname }}</span>
                      </div>
                      <div class="hot">
                        <van-icon name="eye-o" />
                        <span>{{ item.readCount }}</span>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
            </van-list>
        </div>
      </div>
    </div>
    <van-back-top offset="300" bottom="100"/>
</template>
<script lang="ts">

  import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import cloneDeep from 'lodash/cloneDeep'
  export default defineComponent({
    name:'Buy'
  })
</script>
<script lang="ts" setup>
import { onMounted ,ref,computed} from 'vue';
import buyApi,{type buyNavItemData,type FallsData,type TopicsData,type LookPicsData} from '../../api/buy'
import { useBuyStore } from '@/stores/buy';
const buyStore = useBuyStore()
onMounted(()=>{
  getNavList()
  getFallsData_buy(false)
})
const router = useRouter()
//获取navLit
const swiperList= ref<buyNavItemData[]>([])
const getNavList =async()=>{
  try {
    await buyStore.getInitData_buy()
    swiperList.value = cloneDeep(buyStore.navList)
  } catch (error) {
    
  }
}
// 计算navList
let newList = computed(()=>{
  let list: any[]=[]
  let b = swiperList.value.length /2 
  for(let i=0 ;i < swiperList.value.length /2 ;i++){
      let listItem = []
      listItem.push(swiperList.value.slice(i,i+1)[0])
      listItem.push(swiperList.value.slice(b,b+1)[0])
      list.push(listItem)
      b += 1
  }
//   swiperList.value.forEach(item=>{
//     num+=1
//     if(num%2 !==0){
//       let listItem = []
//       listItem.push(swiperList.value.slice(t,t+1)[0])
//       listItem.push(swiperList.value.slice(b,b+1)[0])
//       list.push(listItem)
//       t += 1
//       b += 1
//     }
//  })
  return list
})
let page = ref<number>(1)
let size = ref<number>(2)
const b = ref<FallsData>({
    result:[]
}
)
const blocks = ref<TopicsData[]>([]) 
// 获取瀑布流数据
const getFallsData_buy = async(flay:boolean=true) => {
  try {
    const res = await buyApi.getInitBuyFalls(page.value,size.value)
    // 深拷贝
    b.value = cloneDeep(res.data)
    console.log(b.value);
    
    // 数据整理
   judgeAddData_buy(flay)
  } catch (error) {
    
  }
}
//数据进行处理
const judgeAddData_buy =(flay:boolean) =>{
  if(flay){
    b.value.result[0].topics.splice(5,0,b.value.result[0].look)
  }else{
    b.value.result[0].topics.push(b.value.result[0].look)
  }
  b.value.result[1].topics.splice(4,0,b.value.result[1].look)
  //两个数组拼接
  let result = b.value.result[0].topics.concat(b.value.result[1].topics)
  //计算readCoutn
  result.forEach(item=>{
      if((item.readCount as number)>10000){
        item.readCount = item.readCount.toString().slice(0,2) +'k'
      }
  })
  //触底触发后进行数据拼接
    blocks.value = [...blocks.value,...result]
  
}
const loading=ref(false)
const finished = ref(false)
const onLoad=async()=>{
  if(blocks.value.length >100){
    finished.value = true
  }
  page.value += 1
  loading.value = true
  await getFallsData_buy()
  loading.value = false      
}
const toHome=()=>{
  router.push('/index')
}
const toSearch =() =>{
  router.push('/search')

}
const toShopCart = ()=>{
  router.push('/shopcart')
}
</script>

<style lang="less" scoped>
.buy_container{
  background-color: #eee;
  .van-cell{
    display: none;
  }
  .header{
    width: 100%;
    height:50px;
    box-sizing: border-box;
    padding:0 15px;
    font-size: 16px;
    line-height: 65px;
    display: flex;
    align-items: center;
    position: fixed;
    top:0;
    z-index: 999;
    background-color: #fff;
    .right{
      width: 70px;
    }
    .icon{
      margin-right: 20px;
    }
    .title{
      text-align: center;
      flex:1
    }
  }
  .nav_swiper{
    position: relative;
    top:50px;
    .back_img{
        display: block;
        height: 259px;
        position:absolute;
        top:0;
        left:0;
      }
    .nav_title{
      height: 60px;
        color:white;
        img{
          position: absolute;
          top:20px;
          left:10px;
          width: 65px;
          vertical-align:bottom
        }
        span{
          position: absolute;
          top:30px;
          display: block;
          left:80px;
          font-size: 16px;
        }
    }
    .nav_content{
      .swiper{
        width: 355px;
        height: 270px;
        margin:0 auto;
        box-sizing: border-box;
        border-radius:10px;
        background-color: #fff;
        .swiperItem{
          display: flex;
        }
        .swiper_item{
          display: flex;
          flex-direction: column;
          align-items: center;
          .swiper_content{
            display: flex;
            margin-top:20px;
            width: 88px;
            flex-direction: column;
            align-items: center;
            img{
              width: 60px;
              height: 60px;
            }
            h3{
              line-height: 24px;
            }
            .detail{
              color:#999;
              font-size: 12px;
              white-space: nowrap;
              overflow: hidden;
            }
          }
        }
        .custom-indicator{
              display: flex;
              position: absolute;
              bottom:10px;
              left:50%;
              transform: translate(-50%,0);
              .dot{
                width: 20px;
                height: 2px;
                background-color: #aaa;
                &.active{
                  background-color: red;
                }
                &:nth-child(5){
                  display: none;
                }
                &:nth-child(6){
                  display: none;
                }
                &:nth-child(7){
                  display: none;
                }
            }
        }
     
      } 
    .fallWarp{
      width: 355px;
      margin:10px auto 0;
      .blockItem{
        background-color: #fff;
        margin-bottom: 10px;
        border-radius: 10px;
        width: 172.5px;
        overflow: hidden;
        .imgItem{
          position: relative;
          .blockImg{
              width: 172.5px;
            }
          .arrow{
            position: absolute;
            top:0;
            left: 0;
            bottom:0;
            right: 0;
            display: flex;
            img{
              margin: auto;
              width: 40px;
              height: 40px;
            }
          }
        }
        .blockText{
          font-size: 14px;
          padding: 10px 10px 0;
        }
        
        .bottom{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding:10px 10px 10px;
          box-sizing: border-box;
          .avator{
            display: flex;
            align-items: center;
            font-size: 12px;
            .avatorImg{
              width: 24px;
              height:24px;
              margin-right: 5px;
              border-radius: 50%;
            }
          }
          .hot{
            font-size: 12px;
            color:#7f7f7f;
            .van-icon{
              width: 16px;
              height: 16px;
            }
          }
        }
      }
      }
    
      }
   
  }
}

</style>
